<template>
    <div>
   <topNav :txt="txt"  @showMode='showMode'></topNav>
       <div class="input">
      <van-icon v-if="search == ''" class="input_icon" name="search" />
      <input type="text" class="inputAl" v-model="search" placeholder="搜索" />
    </div>
<div class="main_box">
    <div class="item" v-for="(item,index) in 80" :key="index">
        <img src="../../../static/images/me/headimg.png" alt="">
        <span>小李</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="plus" color="#797979" size="30" />
        </div>
        <span>添加</span>
    </div>
    <div class="item">
        <div class="item_skip">
            <van-icon name="minus" color="#797979" size="30" />
        </div>
        <span>删除</span>
    </div>
</div>




    </div>
</template>
<script>
import topNav from "@/components/return"

export default {
       components: {
    topNav
  },
  data(){
      return{
           search: "",
          txt:'群成员(100)',
          
      }
  }
}
</script>
<style  scoped>
.main_box{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 10px 10px 10px ;
}
.item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin: 10px; */
    width: 20%;
    
}
.item img{
width: 40px;
height: 40px;
margin-top: 10px ;
}
.item span{
    margin-top: 1px;
    color: #8E8E8E;
    font-size: 10px;
}
.item_skip{
    width: 38px;
height: 38px;
border-radius: 5px;
margin-top: 10px ;
border: 1px solid #797979;
display: flex;
justify-content: center;
align-items: center;
}
.wactallteam{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
     color: #8E8E8E;
    font-size: 14px;
    margin-bottom: 10px;
}
.wactallteam span{
    margin-right: 10px;
}
.input {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  position: relative;
  background: #eeeeee;
}
.input_icon {
  position: absolute;
  left: 43%;
  top: 15px;
  font-size: 18px;
}
.inputAl::-webkit-input-placeholder {
  padding-left: 5%;
}
.inputAl {
  height: 35px;
  width: 96%;
  border: none;
  text-align: center;
  border-radius: 20px;
}

</style>